/*
  学习目标：PureComponent-更新原理
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 100,
    msg: 'hello React',

    list: [1, 2, 3],
  };

  handleAdd = () => {
    // ❌ 不要用push等方法，
    // this.state.list.push(4);
    // this.setState(this.state);
    // ✅ 新值覆盖旧值
    this.setState({ list: [...this.state.list, 4] });
  };

  handleAddMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  render() {
    const { count, msg, list } = this.state;
    return (
      <div>
        <h1>{count}</h1>
        <h1>{msg}</h1>
        <button onClick={this.handleAdd}>点我+1</button>
        <button onClick={this.handleAddMsg}>点我+~</button>
        <Child list={list}></Child>
      </div>
    );
  }
}

// React.PureComponent React内置的组件
// 原理: 底层实现了shouldComponentUpdate去自动比较
// 特点： 浅比较， 只比较引用地址, 不会比较值
// 💥不要滥用
class Child extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 浅比较， 只比较引用地址, 不会比较值
    console.log(' ', nextProps.list === this.props.list);
    return;
  }
  render() {
    console.log('Child被更新了  ----->  ');
    return <div>Child - </div>;
  }
}
